<template>
  <div class="category">
      <!-- 商品分类 -->
      <div class="btn">
           <el-button type="primary" @click="addCategoryFn">添加</el-button>
      </div>
      <div class="table">
          <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="分类名称">
      </el-table-column>

      <el-table-column
        label="分类级别">
        <template slot-scope="scope">
          {{scope.row.level===1?'顶级分类':'子分类'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.wap_banner_url" alt="" style="width:90px;height:45px">
        </template>
      </el-table-column>
      <el-table-column
        label="是否显示">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.is_show === 0 ? "否" : "是"
            }}</span>
          </template>
      </el-table-column>
      <el-table-column
        prop="sort_order"
        label="排序">
      </el-table-column>

      <el-table-column
        label="操作">
        <template  slot-scope="scope">
           <el-button type="primary" class="bianji" @click="editFn(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
    
  </div>
</template>

<script>
const {getCategoryLists} = require("../../request/httpApi")
export default {
  
    data(){
        return {
            tableData: [],
        }
    },
    created(){
      //id 名称 图片 显示 排序的数据
     getCategoryLists().then( res => {
        //  console.log(res.data);
         this.tableData = res.data
     })
    },
    methods:{
      //点击添加 跳转到添加页面
      addCategoryFn(){
        this.$router.push("/addcategory")
      },
      editFn(id){
        //利用插槽带id  
        this.$router.push(`/editcategory/${id}`)
        
      }
    }
}
</script>

<style lang="less">
.category{
    background-color: #fff;
    padding: 10px;

    .btn .el-button {
        width: 56px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .el-table__header{
        height: 48px;
    }
    .el-table__row{
        height: 76px;
        box-sizing: border-box;
    }
    .bianji {
        width: 56px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}
</style>